﻿@{
    ViewBag.Title = "GridBtnGroup";
}
<style>
    .filtertable {
        border-collapse: collapse;
    }

        .filtertable td {
            height: 28px;
            line-height: 28px;
            vertical-align: middle;
            border: 1px solid gray;
            border-collapse: collapse;
            padding-left: 10px;
            padding-right: 10px;
        }

        .filtertable input[type=checkbox] {
        }

    #dialog li, #dialog2 li {
        list-style-type: none;
        font-size: 15px;
        margin: 5px 10px 5px 10px;
    }
</style>
<table class="filtertable" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
    <tr>
        <td>
            PageSize(初始分页设置支持10、15、20、25、30)
        </td>
        <td style="width: 400px">
            <span style="margin-top: 5px">
                <input id="txtpage" /><span id="btnpage" class="btn_normal">确定</span>
            </span>
        </td>
        <td>
            AlignCenter(是否居中显示)
        </td>
        <td>
            <input id="ckAC" type="checkbox" checked />
        </td>
    </tr>
    <tr>
        <td>
            FixeHead(是否固定表头)
        </td>
        <td>
            <input id="ckFH" type="checkbox" checked />&nbsp;&nbsp;&nbsp;&nbsp; <span class="cfh">
                设置显示高度<input id="txtheight" value="460" /><span id="btnheight" class="btn_normal">确定</span>
            </span>
        </td>
        <td>
            ShowSequence(是否显示序号)
        </td>
        <td>
            <input id="ckSS" type="checkbox" checked />
        </td>
    </tr>
    <tr>
        <td>
            RowAlternate(是否显示交替行)
        </td>
        <td colspan="3">
            <input id="ckRA" type="checkbox" checked />
        </td>
    </tr>
    <tr>
        <td>
            表头属性
        </td>
        <td>
            <a id="hp" href="#">查看</a>
        </td>
        <td>
            表字段属性
        </td>
        <td>
            <a id="cp" href="#">查看</a>
        </td>
    </tr>
</table>
<br />
<div id="dataGrid" />
<div id="dialog">
    <ul>
        <li><b>align</b>:对齐方式(center/left/right)</li>
        <li><b>colspan</b>:横跨列的个数</li>
        <li><b>orderColumn</b>:排序字段</li>
        <li><b>text</b>:表头显示名称</li>
        <li><b>width</b>:宽度</li>
    </ul>
</div>
<div id="dialog2">
    <ul>
        <li><b>align</b>:对齐方式(center/left/right)</li>
        <li><b>columnType</b>:字段类型(lab/chb/btn/img/imgBtn)</li>
        <li><b>dislength</b>:显示字符个数</li>
        <li><b>disabledKey</b>:控制按钮是否有效的字段名称</li>
        <li><b>edit</b>:指示当前列内容能否被直接编辑</li>
        <li><b>funName</b>:点击按钮时执行的前台方法名称</li>
        <li><b>imgSrc</b>:图片按钮的图片相对路径</li>
        <li><b>key</b>:关键字段名称</li>
        <li><b>name</b>:字段名称</li>
        <li><b>text</b>:当类型为btn时显示的按钮名称</li>
        <li><b>url</b>:后台绑定的url字段名称</li>
    </ul>
</div>
<script language="javascript">
    $(function () {
        initTable();

        $("#ckSS").click(function () {
            gridProp.ShowSequence = $("#ckSS").prop("checked");
            initTable();
        });

        $("#ckFH").click(function () {
            var bl = $("#ckFH").prop("checked");
            if (!bl) {
                $(".cfh").hide();
            }
            else {
                $(".cfh").show();
            }
            gridProp.FixeHead = bl;
            initTable();
        });

        $("#ckRA").click(function () {
            gridProp.RowAlternate = $("#ckRA").prop("checked");
            initTable();
        });

        $("#ckAC").click(function () {
            gridProp.AlignCenter = $("#ckAC").prop("checked");
            initTable();
        });

        $("#btnpage").click(function () {
            gridProp.PageSize = $("#txtpage").val();
            initTable();
        });

        $("#btnheight").click(function () {
            gridProp.Height = $("#txtheight").val() + "px";
            initTable();
        });

        $("#hp").click(function () {
            vDialog.show();
        });

        $("#cp").click(function () {
            vDialog2.show();
        });
    });

    var gridProp = new Gird();
    gridProp.ID = "dataGrid";
    gridProp.IsPage = true; //是否分页
    gridProp.Edit = false;
    gridProp.PageSize = 15;

    gridProp.FilterString = "";
    gridProp.OrderColumn = "ID0"; //设置排序字段
    gridProp.OrderType = "ASC";
    gridProp.Height = "420px";
    gridProp.ShowSequence = true;
    gridProp.RowAlternate = true;
    gridProp.AlignCenter = true;
    gridProp.FixeHead = true;

    //设置表头和表头对应的字段名称
    gridProp.HeadArr = new Array({ text: "选择", width: "50px" },
                                { text: "ID0", width: "50px", orderColumn: "ID0" },
                                { text: "案件编号", width: "150px" },
                                { text: "案件名称", width: "400px" },
                                { text: "流程ID", width: "80px" },
                                { text: "活动ID", width: "80px" },
                                { text: "承办人ID", width: "80px" },
                                { text: "承办时间", width: "80px" },
                                { text: "编辑", width: "50px" },
                                { text: "按钮组", width: "200px" });

    gridProp.ColumnArr = new Array({ columnType: "chb", key: "ID0", align: "center" },
                                    { columnType: "lab", name: "ID0", align: "center" },
                                    { columnType: "lab", name: "AnJianBianHao", align: "center" },
                                    { columnType: "lab", name: "AnJianMingCheng" },
                                    { columnType: "lab", name: "LiuChengID", align: "center" },
                                    { columnType: "lab", name: "HuoDongID", align: "center" },
                                    { columnType: "lab", name: "ChengBanRenID", align: "center" },
                                    { columnType: "lab", name: "ChengBanShiJian", align: "center" },
                                    { columnType: "imgBtn", key: "ID0", imgSrc: "@Url.Content("~/Content/themes/landweb/images/edit.gif")", funName: "itemEdit", align: "center", text: "编辑" },
                                    {
                                        columnType: "btnGroup", align: "center", group: [{ key: "ID0", disabledKey: "ID0", name: "AnJianMingCheng", funName: "itemFun1" },
                                          { key: "ID0", disabledKey: "ID0", text: "按钮二", funName: "itemFun2" }]
                                    });

    function initTable() {
        gridProp.InitFun();
    }

    gridProp.InitFun = function () {
        var vModel = gridProp.getModel();
        $.post("Grid", vModel, function (response) {
            gridProp.initGrid(response);
        });
    }

    function itemEdit(item) {
        alert("edit");
    }

    function itemFun1(item) {
        alert("1");
    }

    function itemFun2(item) {
        alert("2");
    }

    var vDialog = new Dialog();
    vDialog.ID = "dialog";
    vDialog.Title = "表头属性";
    vDialog.Type = "dialog";
    vDialog.ShowClose = true;
    vDialog.Width = "500px";
    vDialog.Height = "200px";
    vDialog.ShowMax = true;
    vDialog.ContentAlign = "left";
    vDialog.ContentValign = "top";
    vDialog.ContentObj = $("#dialog");
    vDialog.initDialog();


    var vDialog2 = new Dialog();
    vDialog2.ID = "dialog2";
    vDialog2.Title = "表头属性";
    vDialog2.Type = "dialog";
    vDialog2.ShowClose = true;
    vDialog2.Width = "500px";
    vDialog2.Height = "360px";
    vDialog2.ShowMax = true;
    vDialog2.ContentAlign = "left";
    vDialog2.ContentValign = "top";
    vDialog2.ContentObj = $("#dialog2");
    vDialog2.initDialog();
</script>
